export const template = isTaskListener => {
  return `
  <div class="panel-tab__content">
    <el-table :data="elementListenersList" size="mini" border>
      <el-table-column label="序号" width="50px" type="index" />
      <el-table-column label="事件类型" min-width="100px" prop="event" />
      <el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
      <el-table-column label="操作" width="90px">
        <template slot-scope="{ row, $index }">
          <el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
          <el-divider direction="vertical" />
          <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="element-drawer__button">
      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
    </div>

    <!-- 监听器 编辑/创建 部分 -->
    <el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="width + 'px'" append-to-body destroy-on-close>
       <div class="app-container">
        <el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
          <el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
            <el-select v-model="listenerForm.event">
              <el-option label="start" value="start"/>
              <el-option label="end" value="end"/>
            </el-select>
          </el-form-item>
          <el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
            <el-select v-model="listenerForm.listenerType">
              <el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]"
                         :value="i"/>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="listenerForm.listenerType === 'classListener'"
            label="Java类"
            prop="class"
            key="listener-class"
            :rules="{ required: true, trigger: ['blur', 'change'] }"
          >
            <el-input v-model="listenerForm.class" clearable/>
          </el-form-item>
          <el-form-item
            v-if="listenerForm.listenerType === 'expressionListener'"
            label="表达式"
            prop="expression"
            key="listener-expression"
            :rules="{ required: true, trigger: ['blur', 'change'] }"
          >
            <el-input v-model="listenerForm.expression" clearable/>
          </el-form-item>
          <el-form-item
            v-if="listenerForm.listenerType === 'delegateExpressionListener'"
            label="代理表达式"
            prop="delegateExpression"
            key="listener-delegate"
            :rules="{ required: true, trigger: ['blur', 'change'] }"
          >
            <el-input v-model="listenerForm.delegateExpression" clearable/>
          </el-form-item>
          <template v-if="listenerForm.listenerType === 'scriptListener'">
            <el-form-item
              label="脚本格式"
              prop="scriptFormat"
              key="listener-script-format"
              :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
            >
              <el-input v-model="listenerForm.scriptFormat" clearable/>
            </el-form-item>
            <el-form-item
              label="脚本类型"
              prop="scriptType"
              key="listener-script-type"
              :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
            >
              <el-select v-model="listenerForm.scriptType">
                <el-option label="内联脚本" value="inlineScript"/>
                <el-option label="外部脚本" value="externalScript"/>
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="listenerForm.scriptType === 'inlineScript'"
              label="脚本内容"
              prop="value"
              key="listener-script"
              :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
            >
              <el-input v-model="listenerForm.value" clearable/>
            </el-form-item>
            <el-form-item
              v-if="listenerForm.scriptType === 'externalScript'"
              label="资源地址"
              prop="resource"
              key="listener-resource"
              :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
            >
              <el-input v-model="listenerForm.resource" clearable/>
            </el-form-item>
          </template>
        </el-form>
        <el-divider/>
        <p class="listener-filed__title">
          <span><i class="el-icon-menu"></i>注入字段：</span>
          <el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
        </p>
        <el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
          <el-table-column label="序号" width="50px" type="index"/>
          <el-table-column label="字段名称" min-width="100px" prop="name"/>
          <el-table-column label="字段类型" min-width="80px" show-overflow-tooltip
                           :formatter="row => fieldTypeObject[row.fieldType]"/>
          <el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip
                           :formatter="row => row.string || row.expression"/>
          <el-table-column label="操作" width="100px">
            <template slot-scope="{ row, $index }">
              <el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
              <el-divider direction="vertical"/>
              <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="element-drawer__button">
          <el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
        </div>
      </div>
    </el-drawer>

    <!-- 注入西段 编辑/创建 部分 -->
    <el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
      <el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
        <el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
          <el-input v-model="listenerFieldForm.name" clearable />
        </el-form-item>
        <el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
          <el-select v-model="listenerFieldForm.fieldType">
            <el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="listenerFieldForm.fieldType === 'string'"
          label="字段值："
          prop="string"
          key="field-string"
          :rules="{ required: true, trigger: ['blur', 'change'] }"
        >
          <el-input v-model="listenerFieldForm.string" clearable />
        </el-form-item>
        <el-form-item
          v-if="listenerFieldForm.fieldType === 'expression'"
          label="表达式："
          prop="expression"
          key="field-expression"
          :rules="{ required: true, trigger: ['blur', 'change'] }"
        >
          <el-input v-model="listenerFieldForm.expression" clearable />
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
      </template>
    </el-dialog>
  </div>
  `;
};
